<template>
    <div class="course-list flex flex-col sm:flex-row dark:bg-regal-dark w-full">
        <div :class="'w-full ml-0 sm:ml-2 mt-2 sm:mt-0' ">
            <div class="table-default">
                <div class="pt-5 pl-2">
                    <el-button type="primary" @click="addTeacher"><Icon name="plus" className="w-4 h-4 mr-1" /> 添加公告</el-button>
                </div>
                <el-table
                    :data="tableData"
                    class="course-table mt-3"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        v-for="item in headerConfig"
                        :key="item.prop"
                        :prop="item.prop"
                        :label="item.label"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" @click="editTeacher(scope.row)">编辑</el-button>
                            <el-button type="text" @click="deleteNotice(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="mt-3" background layout="prev, pager, next" @current-change="changePage" @size-change="changeLimit"  :current-page="Pages.current_page" :page-sizes="Pages.per_page" :total="Pages.total" />
            </div>

            <el-dialog v-model="visible" :title="`${form.id? '编辑' : '添加'}公告`" destroy-on-close>
                <div class="edit-dialog">
                    <el-form :label-width="100" :rules="rules" ref="formRef" :model="form">
                        <el-form-item label="标题" prop="title">
                            <el-input  v-model="form.title"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" prop="image" >
                            <Upload imageClass="w-28 h-28  mx-auto" v-model="form.image" />
                        </el-form-item>
                        <el-form-item label="内容" prop="content">
                            <el-input  type="textarea" v-model="form.content"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visible = false">取消</el-button>
                        <el-button type="primary" @click="saveConfirm">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import Http from '/admin/support/http'
import type { FormInstance, FormRules } from 'element-plus'
import { Code } from '/admin/enum/app'
import Message from '/admin/support/message'

const form = ref({
    id: '',
    title: '',
    image: '',
    content: '',
})
const formRef = ref(null)
// 表单验证
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
        { max: 100, message: '标题不得超过100字', trigger: 'blur' },
    ],
    image: [
        { required: true, message: '上传图片', trigger: 'change' },
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'change' },
    ],
})
const Pages = {
    current_page: 1,
    per_page: 10,
    total: 0
}

const changePage = (val: number) => {
    Pages.current_page = val
    getNoticeList()
}

const changeLimit = (val: number) => {
    Pages.per_page = val
    getNoticeList()
}
// 日历table 的头部配置
const headerConfig = [
    {
        prop: 'id',
        label: 'ID',
    },
    {
        prop: 'title',
        label: '标题',
    },
    {
        prop: 'created_at',
        label: '创建时间',
    },
]
const tableData = ref([])
const visible = ref(false)
// 获取公告列表
const getNoticeList = async () => {
    const { data } = await Http.get('/notice/list', {
        page: Pages.current_page,
        limit: Pages.per_page,
    })
    if (data.code === Code.SUCCESS) {
        tableData.value = data.data
    } else {
        Message.error(data.message)
    }
}

// 添加公告
const addTeacher = () => {
    visible.value = true
    form.value = {
        id: '',
        title: '',
        image: '',
        content: '',
    }
    formRef.value.resetFields()
}

// 确认添加/编辑公告
const saveConfirm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const params = {
                title: form.value.title,
                image: form.value.image,
                content: form.value.content,
            }
            if (form.value.id) {
                params.id = form.value.id
            }
            const { data } = await Http.post(params.id ? '/notice/update' :'/notice/add', params)
            if (data.code === Code.SUCCESS) {
                visible.value = false
                getNoticeList()
                Message.success('保存成功')
            } else {
                Message.error(data.message)
            }
        }
    })
}

// 编辑公告
const editTeacher = async (item) => {
    form.value.id = item.id
    form.value.title = item.title
    form.value.image = item.image
    form.value.content = item.content
    visible.value = true
}

//删除公告
const deleteNotice = (item) => {
    Message.confirm('确定删除公告吗？', async () => {
        const { data } = await Http.post('/notice/delete', { id: item.id })
        if (data.code === Code.SUCCESS) {
            getNoticeList()
            Message.success('删除成功')
        } else {
            Message.error(data.message)
        }
    })
}
getNoticeList()

</script>

<style scoped lang="scss">
.course-list {
    height: calc(100vh - 120px);
}
.table-default {
    height: calc(100% - 180px);
}
.course-table {
    background: #fff;
    .table {
        width: 100%;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        .course-header {
            height: 60px;
            td {
                text-align: center;
                border-right: 1px solid #ebeef5;
                border-bottom: 1px solid #e1e4e8;
            }
        }
        .course-tr {
            border-bottom: 1px solid #e1e4e8;

            .time {
                width: 100px;
                text-align: center;
                border-right: 1px solid #ebeef5;
            }
            .course-item {
                border-right: 1px solid #ebeef5;
                width: calc(100% / 7.6);
                height: 110px;
                padding: 4px;
                .active {
                    height: 100%;
                    color: #7C93C3;
                    background: #DFF5FF;
                    border-radius: 4px;
                    padding: 10px;
                }
            }
        }
    }
}
.edit-dialog {
    padding: 36px;
}
</style>
